<template>
  <el-dialog
    width="100%"
    :fullscreen="true"
    top="0"
    :title="!dataForm.seqno ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">


    <el-row>
      <el-col  :span="12">
        <el-form-item label="机构编码" prop="bankid" v-if="!dataForm.id">
          <el-input v-model="dataForm.bankid" placeholder="机构编码"></el-input>
        </el-form-item>
      </el-col>
      <el-col  :span="12">
        <el-form-item label="区域"   :class="{ 'is-required': true}">
          
              <div class="contentpanel-layout">
                <div class="contentview-layout bottom-in">
                  <div class="contentview-main" style="padding: 0px 0px 0px 0px;">
                    <div class="search-box" style="width:100%;">
                      <el-popover placement="bottom-start" :width="width" v-model="visible2" trigger="manual">
                        
                        <div slot="reference">
                            <el-input v-model="value" placeholder="输入区域代码或名称" 
                             @focus="handleFocus"
                             @keyup.native="handleFocus"
                             @blur="handleBlur" style="width:100%"></el-input>

                        </div> 
                        
                        <el-table :data="list"   @row-click="onClickItem" @row-dblclick="onClickItem">
                          <el-table-column property="code" label="区域代码"></el-table-column>
                          <el-table-column property="name" label="区域名称"></el-table-column>
                        </el-table>
                             
                      </el-popover>
                    </div>    
                  </div>
                </div> 
              </div>

        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="12">
        <el-form-item label="机构名称" prop="bankname">
          <el-input v-model="dataForm.bankname" placeholder="机构名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="机构简称" prop="bankabbr">
          <el-input v-model="dataForm.bankabbr" placeholder="机构简称"></el-input>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="12">
        <el-form-item label="机构分类" prop="linetype">
          <el-input v-model="dataForm.linetype" placeholder="机构分类" maxlength="1"></el-input>
        </el-form-item>
      </el-col>



      <el-col :span="12">
          <el-form-item label="机构分类编码" prop="lineno">
            <el-input v-model="dataForm.lineno" placeholder="机构分类编码" maxlength="3"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="机构标识" prop="orgid">
          <el-input v-model="dataForm.orgid" placeholder="机构标识" maxlength="2"></el-input>
        </el-form-item>
      </el-col>



      <el-col :span="12">
          <el-form-item label="开通标志" prop="state">
            <el-select v-model="dataForm.state" placeholder="开通标志" style="width:100%;">
                <el-option
                  v-for="item in dataForm.orgState"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>

      <el-col :span="12">
          <el-form-item label="IP地址" prop="ipaddr">
            <el-input v-model="dataForm.ipaddr" placeholder="参与者IP地址"></el-input>
          </el-form-item>
      </el-col>

        <el-col :span="12">
          <el-form-item label="接入方式" prop="cmode">
            <el-select v-model="dataForm.cmode" placeholder="接入方式"  style="width:100%;">
                <el-option
                  v-for="item in dataForm.cmodes"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>

    <el-row>


      <el-col :span="12">
        <el-form-item label="通讯端口" prop="port">
          <el-input v-model="dataForm.port" placeholder="参与者通讯端口"></el-input>
        </el-form-item>
      </el-col>

            <el-col :span="12">
        <el-form-item label="机构类型" prop="btype">
          <el-select v-model="dataForm.btype" placeholder="机构类型" style="width:100%;">
              <el-option
                v-for="item in dataForm.orgTypes"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>

      <el-col :span="12">
        <el-form-item label="URL地址" prop="url">
          <el-input v-model="dataForm.url" placeholder="参与者URL地址"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
            <el-form-item label="业务开通列表" prop="svclist">
              <el-checkbox-group v-model="dataForm.svclist">
                <el-checkbox v-for="fun in functionList" :key="fun.trncode" :label="fun.trncode">{{ fun.trncode }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
      </el-col>
    </el-row>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        visible2: false,
        value: '',
        value2: '',
        width:660,
        height:270,
        list: [],
        functionList: [],
        dataForm: {
          seqno: 0,
          bankid: '',
          bankname: '',
          bankabbr: '',
          orgid: '',
          btype: '',
          cmode: '',
          state: '',
          ipaddr: '',
          port: '',
          url: '',
          linetype: '',
          lineno: '',
          remark: '',
          orgTypes: [],
          orgState: [],
          cmodes: [],
          svclist: []
        },
        dataRule: {
          linetype: [
            { required: true, message: '机构分类不能为空', trigger: 'blur' }
          ],
          lineno: [
            { required: true, message: '机构分类编码不能为空', trigger: 'blur' }
          ],

          bankid: [
            { required: true, message: '机构编码不能为空', trigger: 'blur' }
          ],
          orgid: [
            { required: true, message: '机构标识不能为空', trigger: 'blur' }
          ],
          bankname: [
            { required: true, message: '机构名称不能为空', trigger: 'blur' }
          ],
          bankabbr: [
            { required: true, message: '机构简称不能为空', trigger: 'blur' }
          ],
          btype: [
            { required: true, message: '机构类型不能为空', trigger: 'blur' }
          ],
          cmode: [
            { required: true, message: '接入方式不能为空', trigger: 'blur' }
          ],
          state: [
            { required: true, message: '开通标志不能为空', trigger: 'blur' }
          ],
          ipaddr: [
            { required: true, message: '参与者IP地址不能为空', trigger: 'blur' }
          ],
          port: [
            { required: true, message: '参与者通讯端口不能为空', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '参与者URL地址不能为空', trigger: 'blur' }
          ]

        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.seqno = id || 0
        this.visible = true

        this.$http({
          url: this.$http.adornUrl(`/sys/bdcbankinfo/org/list`),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.orgTypes = data.orgType
              this.dataForm.orgState = data.orgState
              this.dataForm.cmodes = data.cmode
              this.functionList = data.functionList
            }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.seqno) {
            this.$http({
              url: this.$http.adornUrl(`/sys/bdcbankinfo/info/${this.dataForm.seqno}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.bankid = data.bdcBankinfo.bankid
                this.dataForm.bankname = data.bdcBankinfo.bankname
                this.dataForm.bankabbr = data.bdcBankinfo.bankabbr
                this.dataForm.orgid = data.bdcBankinfo.orgid
                this.dataForm.btype = data.bdcBankinfo.btype
                this.dataForm.cmode = data.bdcBankinfo.cmode
                this.dataForm.state = data.bdcBankinfo.state
                this.dataForm.ipaddr = data.bdcBankinfo.ipaddr
                this.dataForm.port = data.bdcBankinfo.port
                this.dataForm.url = data.bdcBankinfo.url
                this.dataForm.remark = data.bdcBankinfo.remark
                this.dataForm.svclist = data.bdcBankinfo.funList
                this.value2 = data.bdcBankinfo.region
                this.value = data.bdcBankinfo.region
                this.dataForm.lineno = data.bdcBankinfo.lineno
                this.dataForm.linetype = data.bdcBankinfo.linetype
              }
            })
          }
        })
      },

      handleFocus(){
        console.log("handleFocus:" + this.value)
        this.$http({
                url: this.$http.adornUrl(`/sys/bdcbankinfo/area/search`),
                method: 'get',
                params: this.$http.adornParams({
                  "key":this.value
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                    this.list = data.list;
                    this.visible2 = true;
                }
              })

      },
      handleBlur(){
        this.visible2 = false;
      },
      onClickItem(row){
        this.value = row.name;
        this.value2 = row.code;
        this.visible2 = false;
      },

      // 表单提交
      dataFormSubmit () {

        if (!this.value2){
          this.$message.error("区域不能为空");
          return;
        }

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/sys/bdcbankinfo/${!this.dataForm.seqno ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'seqno': this.dataForm.seqno || undefined,
                'bankid': this.dataForm.bankid,
                'bankname': this.dataForm.bankname,
                'bankabbr': this.dataForm.bankabbr,
                'orgid': this.dataForm.orgid,
                'btype': this.dataForm.btype,
                'cmode': this.dataForm.cmode,
                'state': this.dataForm.state,
                'ipaddr': this.dataForm.ipaddr,
                'port': this.dataForm.port,
                'url': this.dataForm.url,
                'remark': this.dataForm.remark,
                'region': this.value2,
                'funList': this.dataForm.svclist,
                'linetype': this.dataForm.linetype,
                'lineno': this.dataForm.lineno
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
